<template>
  <div class="users-base-wrapper">
    <!-- <div class="module-name">eCRF设计</div> -->
    <div class="details-layout">
      <el-row style="text-align: left; margin-bottom: 16px;">
        <el-button type="primary" size="mini" @click="handleRefresh" icon="el-icon-refresh">刷新</el-button>
        <el-button type="primary" size="mini" @click="handleAdd" v-if="isOperate" icon="el-icon-plus">新增</el-button>
        <el-button type="primary" size="mini" @click="handleCopy" v-if="isOperate" icon="el-icon-copy-document">复制eCRFs</el-button>
        <column-control v-model="tableColumns" size="mini" style="margin-left: 8px; margin-right: 8px;"></column-control>
      </el-row>
      <el-table :data="eCRFDesignList" stripe style="width: 102%" size="mini" row-key="id"
                :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }" :tree-props="{ children: 'children' }">
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <template v-for="(column, index) in tableColumns">
          <el-table-column v-if="column.visible" :width="column.width" :key="index" :min-width="column.minWidth" 
                           :label="column.name" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <!-- 变量 -->
              <div v-if="column.key === 'variable'">
                <i class="el-icon-c-scale-to-original table-icon" @click="handleJumpPage(scope.row, 'variableConfig')"></i>
              </div>
              <div v-if="column.key === 'interface'">
                <i class="el-icon-monitor table-icon" @click="handleJumpPage(scope.row, 'interfacialDesign')" v-if="scope.row.embedded === '0'"></i>
                <span v-else>/</span>
              </div>
              <div v-if="column.key === 'embeddedColumn'">
                <i class="el-icon-connection table-icon" v-if="scope.row.embedded === '1'" @click="handleJumpPage(scope.row, 'embeddedDesign')"></i>
                <span v-else>/</span>
              </div>
              <!-- 编辑 -->
              <div v-if="column.key === 'edit'">
                <i class="el-icon-edit table-icon" @click="handleEdit(scope.row)" v-if="isOperate"></i>
                <i v-else class="el-icon-view table-icon" @click="handleEdit(scope.row)"></i>
              </div>
              <!-- 删除 -->
              <div v-if="column.key === 'delete'">
                <i class="el-icon-delete table-icon" @click="handleDelete(scope.row)" v-if="scope.row.surface !== 'SUBJECT' && isOperate"></i>
                <span v-else>/</span>
              </div>
              <div v-if="column.key === 'sort1'">
                <i class="el-icon-sort table-icon" @click="handleSort(scope.row)" v-if="scope.row.surface !== 'SUBJECT' && isOperate"></i>
                <span v-else>/</span>
              </div>
              <div v-if="column.key === 'setting'">
                <i class="el-icon-setting table-icon" @click="handleJumpPage(scope.row, 'checkSetting')"></i>
              </div>
              <div v-if="column.key === 'operation'" @click="handleChangeStatus(scope.row)">
                <el-switch v-if="scope.row.surface !== 'SUBJECT' && scope.row.operation === '0'" :value ="true" active-color="#13ce66"></el-switch>
                <el-switch v-else-if="scope.row.surface !== 'SUBJECT' && scope.row.operation === '1'" :value ="false" active-color="#13ce66"></el-switch>
                <span v-else-if="scope.row.surface === 'SUBJECT'">/</span>
              </div>
              <span v-else>{{ scope.row[column.key] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <add-record 
        :dialogVisible="dialogVisible" 
        :dialogTitle="dialogTitle" 
        :editData="editData"
        :isOperate="isOperate"
        @handleCancel="handleCancel"
        :searchParams="searchParams"
        :classifyList="classifyList"
        :referenceTableList="referenceTableList"></add-record>
      <sortData :sortVisible="sortVisible" :sortData="sortData" :sortList="sortList" @handleSortCancel="handleSortCancel"></sortData>
      <copy-eCRFs :currentECRFList="eCRFDesignList" :copyVisible="copyVisible" @handleCopyCancel="handleCopyCancel" :sourceProjectList="sourceProjectList"></copy-eCRFs>
    </div>
  </div>
</template>
<script>

import { mapActions } from 'vuex'
import { tableColumns } from './data'
import addRecord from './component/add-design.vue'
import sortData from './component/sort'
import routes from '@/router/users-manage'
import copyECRFs from './component/copy-eCRFs'
import { cloneDeep } from 'lodash-es'

export default {
  name: 'users-manage',
  components: {
    addRecord,
    sortData,
    copyECRFs
  },

  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      editData: {},
      eCRFDesignList: [],
      tableColumns,
      referenceTableList: [],
      sortVisible: false,
      sortData: {},
      sortList: [],
      searchParams: {},
      classifyList: [],
      copyVisible: false,
      sourceProjectList: [],
      isOperate: true
    }
  },
  mounted() {
    const databaseInfo = JSON.parse(localStorage.getItem('sys-database-info')) || {}
    this.searchParams = {
      projectId: localStorage.getItem('sys-project-id') || '',
      ...databaseInfo
    }
    if (databaseInfo.isLock === '1') {
      this.isOperate = false
    }
    this.getDesignList()
  },

  methods: {
    ...mapActions('eCRFDesign', ['qryDesignList', 'editCrfDesignStatus', 'deleteCrfDesignStatus', 'qryClassifyList']),
    ...mapActions('projectList', ['qryProjectListNoPage']),

    // 查询eCRF表单列表
    getDesignList() {
      const params = {
        ...this.searchParams,
        embedded: ''
      }
      this.qryDesignList({ params }).then((res) => {
        const { data, code, message } = res
        if (code === 200) {
          this.eCRFDesignList = data
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 跳转页面
    handleJumpPage(record, targetUrl) {
      this.$router.push({
        path: routes[targetUrl].path,
        query: {
          id: record.id,
          name: record.surfaceName,
          surface: record.surface,
          surfaceName: record.surfaceName,
          quoteCrf: record.quoteCrfSurface,
          quoteCrfName: record.quoteCrfSurfaceName
        },
      })
    },

    // 打开复制ecRFs弹框
    handleCopy() {
      this.copyVisible = true
      this.getProjectList()
    },

    // 取消复制
    handleCopyCancel(type) {
      this.copyVisible = false
      if (type === 'refresh') {
        this.getDesignList()
      }
    },

    // 查询项目列表
    getProjectList() {
      this.qryProjectListNoPage().then((res) => {
        const { data, code } = res
        if (code === 200) {
          this.sourceProjectList = data || []
        }
      })
    },

    // 刷新列表
    handleRefresh() {
      this.getDesignList()
    },

    // 添加
    handleAdd() {
      this.dialogVisible = true
      this.editData = {
        sort: this.eCRFDesignList[this.eCRFDesignList.length - 1].sort + 1
      }
      this.dialogTitle = '新建'
      this.getReferenceTableList()
      this.getClassifyList()
    },

    // 打开排序弹框
    handleSort(record) {
      this.sortVisible = true
      this.sortData = record
      const list = []
      this.eCRFDesignList.map((eItem, eIndex) => {
        if (eItem.surface !== 'SUBJECT') {
          list.push(eItem)
        } 
      })
      this.sortList = cloneDeep(list)

    },

    // 关闭
    handleSortCancel(type) {
      this.sortVisible = false
      if (type === 'refresh') { // 是刷新列表
        this.getDesignList()
      }
    },

    // 查询分类列表 
    getClassifyList() {
      const params = {
        ...this.searchParams
      }
      this.qryClassifyList({ params }).then((res) => {
        const { data, code, message } = res
        if (code === 200) {
          const list = []
          if (data.length > 0) {
            data.map((dItem) => {
              if (dItem) {
                list.push(dItem)
              }
            })
          }
          this.classifyList = cloneDeep(list)
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 查询引用表列表
    getReferenceTableList() {
      const params = {
        ...this.searchParams,
        embedded: '0'
      }
      this.qryDesignList({ params }).then((res) => {
        const { data, code, message } = res
        if (code === 200) {
          this.referenceTableList = data
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 编辑
    handleEdit(record) {
      this.dialogTitle = '编辑'
      this.dialogVisible = true
      this.editData = { ...record }
      this.getReferenceTableList()
      this.getClassifyList()
    },

    // 关闭弹框
    handleCancel(type) {
      this.dialogVisible = false
      if (type === 'refresh') { // 是刷新列表
        this.getDesignList()
      }
    },

    // 删除
    handleDelete(row) {
      const params = {
        id: row.id
      }
      this.$confirm('确定删除该条数据吗？', '删除提示', {
        type: 'warning'
      }).then(res => {
        this.deleteCrfDesignStatus({ params })
          .then(res => {
            if (res.code === 200) {
              this.$message({ message: '删除成功', type: 'success' })
              this.getDesignList()
            }
          })
      })
    },

    // 状态变更
    handleChangeStatus(record) {
      if (!this.isOperate) {
        this.$message.error('数据库版本锁定中，无法操作')
        return
      }
      if (record.surface === 'SUBJECT') {
        return ''
      }
      const data = {
        id: record.id,
        operation: record.operation === '0' ? '1' : '0'
      }
      this.editCrfDesignStatus({ data }).then((res) => {
        const { code } = res
        if (code === 200) {
          this.$message.success('操作成功！')
          this.getDesignList()
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
